<script lang="ts" setup>
import { ref, h, onBeforeMount, nextTick, reactive } from "vue";
import {
  VxeFormPropTypes,
  VxeFormInstance,
  VxeModalInstance,
  VxeFormProps
} from "vxe-pc-ui";
import { refundGetInfo } from "@/api/capital/capital";
const emits = defineEmits<{ (e: "reload"): void }>();
const vxeModalRef = ref<VxeModalInstance>();
import { ElMessage } from "element-plus";

const modalOptions = reactive<{
  modalValue: boolean;
  modalTitle: string;
  canSubmit: boolean;
}>({
  modalValue: false,
  modalTitle: "",
  canSubmit: true
});

const showModal = (title: string, canSubmit?: boolean): void => {
  modalOptions.modalTitle = title;
  modalOptions.modalValue = true;
  modalOptions.canSubmit = canSubmit ?? true;
};
const detailid = ref<number | string>();
const showAddModal = (id:number) => {
  showModal(`查看`);
  detailid.value = id;
  getdetail(id);
  // nextTick(() => {
  //   formRef.value.clearValidate();
  // });
};
const detail = ref<any>();
const getdetail = (id:number)=>{
  refundGetInfo(id).then(res=>{
    detail.value = res.data;
    modalOptions.modalValue = true;
  })
                
}
const handleSubmit = async () => {
  const validate = await ruleFormRef.value.validate();
  if (!validate) {
    addBackstage(form).then(() => {
      modalOptions.modalValue = false;
      emits("reload");
    });
  }
};

onBeforeMount(() => {
  
});
defineExpose({ showAddModal });
</script>
<template>
  <vxe-modal
    ref="vxeModalRef"
    v-model="modalOptions.modalValue"
    width="600"
    showFooter
    :title="modalOptions.modalTitle"
  >
    <template #default>
      <el-form v-if="detail" label-width="200px">
        <el-row>
          <el-col :span="19" :offset="1">
            <el-form-item label="商户名称">
              <span>{{detail.merchantsAccountName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="账户类型">
              <span>{{detail.payerBankAccountTypeDisplay}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div>
              退款信息
            </div>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="退款余额">
              <span>{{detail.refundAmount}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="退款户名">
              <span>{{detail.merchantsAccountName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="退款卡号">
              <span>{{detail.merchantsAccount}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="开户银行">
              <span>{{detail.merchantsBank}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="开户行支行">
              <span>{{detail.branchName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="退款说明">
              <span>{{detail.remark}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="退款状态">
              <span>{{detail.stateDisplay}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="理由">
              <span></span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <!-- <template #footer>
      <vxe-button content="关闭" @click="modalOptions.modalValue = false" />
      <vxe-button
        v-if="modalOptions.canSubmit"
        status="primary"
        content="确定"
        @click="handleSubmit"
      />
    </template> -->
  </vxe-modal>
</template>
<style>
.form_header {
  font-size: 15px;
  color: #6379bb;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}
.left-title {
  font-weight: 700;
  font-family: 微软雅黑;
  font-size: 14px;
  width: 85px;
  text-align: right;
}
.right-text {
  font-size: 14px;
}

</style>